import React from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import {View, Button, Image} from '@tarojs/components';
import {AtModal, AtModalContent} from 'taro-ui';

import * as T from '../../types';
import actions from '../../actions/index';
import {store2Props} from '../../selectors';
import {
  OSS_PATH_PREFIX,
  OSS_BASE_PATH_PREFIX,
  PRIZE_STATUS,
  PRIZE_RESULT_TYPE,
  IMAGE_EMPTY,
  CODE_SUCCESS,
  GAME_RPICE_TYPE,
} from '../../constant';

type IInfoProps = T.IProps & T.IInfoProps;

import './SyntheticPrizeModal.less';
import 'taro-ui/dist/style/components/modal.scss';
import className from 'classnames';

// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
/**
 * 合成礼品模态框
 */
export default class SyntheticPrizeModal extends React.Component<Partial<IInfoProps>, T.IInfoState> {
  // 使用state值
  constructor(props) {
    super(props);
    this.state = {
      atModal: {
        closeOnClickOverlay: false,
      },
      pics: {
        closeIcon: OSS_PATH_PREFIX + '/syntheticPrizeModalCloseIcon.png',
      },
    };
  }

  componentWillReceiveProps(nextProps: Readonly<Partial<T.IProps>>, nextContext: any): void {
    // 领取奖励
    if (nextProps.main.status.claimingRewards == false && this.props.main.status.claimingRewards == true) {
      if (nextProps.main.response.claimRewards == CODE_SUCCESS) {
        Taro.navigateTo({
          url: PRIZE_RESULT_TYPE[GAME_RPICE_TYPE['product']].url + '?prizeStatus=' + PRIZE_STATUS['RECEIVED'],
        });
        this.props.onCancel();
      } else {
        Taro.showToast({
          title: '领取奖励失败',
          icon: 'none',
        });
      }
    }
  }

  /**
   * 残忍拒绝
   */
  handleCancel = () => {
    this.props.onCancel();
  };

  /**
   * 点击领取
   */
  handleReceive = () => {
    let {
      main: {syntheticResult},
    } = this.props;

    // 有商品去调用领取接口
    if (syntheticResult && syntheticResult.id) {
      // 编辑参数
      let idList = [syntheticResult.collectionId];

      // 编辑参数
      this.props.actions.action.claimRewards({idList});
    }
  };

  /**
   * 渲染
   * @returns
   */
  render() {
    let {
      visible,
      actions: {action},
      main: {syntheticResult},
    } = this.props;
    const {atModal, pics} = this.state;
    syntheticResult = syntheticResult || {};
    let currentPrize = syntheticResult && syntheticResult.id ? PRIZE_RESULT_TYPE[syntheticResult.prizeType] : {};

    let productTitle =
      syntheticResult && syntheticResult.prizeName ? syntheticResult.prizeName : currentPrize.name || '--';
    let thum = syntheticResult && syntheticResult.imgUrl ? syntheticResult.imgUrl : currentPrize.thum || IMAGE_EMPTY;

    return (
      <AtModal isOpened={visible} className="SyntheticPrizeModal" closeOnClickOverlay={atModal.closeOnClickOverlay}>
        <AtModalContent>
          <View className="modalContent">
            <View onClick={this.handleCancel} className="modalClose">
              <Image src={pics.closeIcon} className="prizeClose" />
            </View>
            <View className="modalPrizeHeader">
              <View className="prizeIptitle">恭喜您获得：</View>
              <View className="prizeName">{productTitle}</View>
            </View>
            <View className="modalPrizeContent">
              <View className="prizeResult">
                <Image src={thum} className="prizeIcon" />
              </View>
            </View>
          </View>
          {syntheticResult.prizeType == GAME_RPICE_TYPE['product'] ? (
            <View className="modalPrizeFooter" onClick={this.handleReceive}>
              <View className="prizeOpreate">
                <View className="operateTitle">领取奖励</View>
              </View>
            </View>
          ) : (
            <></>
          )}
        </AtModalContent>
      </AtModal>
    );
  }
}
